<template>
	<view class="home">
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" circular="true">
			<swiper-item v-for="item in list" :key="item.id">
				<image :src="item.img_url" class="img"></image>
			</swiper-item>
		</swiper>
		<view class="topbar">
			<view class="img"><image src="../../static/icons/chat.png"></image></view>
			<text class="center">
				<text>推荐</text>
				<text>品牌</text>
			</text>
			<view class="pic"><image src="../../static/icons/search.png"></image></view>
			<view class="pic"><image src="../../static/icons/cart.png"></image></view>
		</view>
		<view class="brand">
			<text class="left">品类推荐</text>
			<navigator url="/pages/find/find" open-type="switchTab" class="right">更多 ></navigator>
		</view>
		<view class="brand-swiper">
			<navigator url="/pages/find/find" open-type="switchTab" class="per" v-for="item in brandlist" :key="item.id">
				<image :src="item.cover_img"></image>
				<view class="ch">{{item.cname}}</view>
				<view class="en">{{item.ename}}</view>
			</navigator>
		</view>
		<view class="speci">特色优选</view>
		<view class="content">
			<view class="speci-swiper" v-for="item in hotList" :key="item.id" @tap="toItem(item)">
				<view class="inner-card">
					<image :src="item.cover_img"></image>
					<view class="info">
						<view class="name">{{item.gname}}</view>
						<view class="desc">{{item.detail_desc}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { banner, brand, hotList } from "../../api/home/index.js"
	export default {
		data() {
			return {
				list:[],
				brandlist:[],
				hotList:[],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			};
		},
		methods:{
			toItem(item){
				uni.navigateTo({
				    url: `/pages/kind/gooditem?productId=${item.id}`
				});	
			},
			initBanner(){
				banner({
					use:0
				})
				.then(res =>{
					console.log(res);
					this.list = res.data.data;
				})
			},
			getBrand(){
				brand()
				.then(res =>{
					console.log(res);
					this.brandlist = res.data.data;
				})
			},
			getHot(){
				hotList()
				.then(res=>{
					console.log(res);
					this.hotList = res.data.data;
				})
			}
		},
		onLoad(){
			this.initBanner(),
			this.getBrand(),
			this.getHot()
		}
	}
</script>

<style lang="scss" scoped>
.home{
	padding-top: var(--status-bar-height);
	background-color: #f1ece7;
	.swiper{
		height: 235px;
		.img{
			width: 100%;
			height: 100%;
		}
	}
	.topbar{
		display: flex;
		width: 375px;
		height: 44px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 999;
		background: rgba(0,0,0,.4);
		.img{
			width: 87px;
			height: 44px;
			padding: 15px;
			padding-right: 0;
			box-sizing: border-box;
			image{
				width: 18px;
				height: 18px;
			}
		}
		.center{
			width: 216px;
			height: 100%;
			padding: 10px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			text{
				width: 32px;
				height: 30px;
				padding: 0 10px;
				text-align: center;
				box-sizing: border-box;
				color: #fff;
				&:nth-child(1){
					margin-left: 50px;
				}
			}
		}
		.pic{
			width: 36px;
			height: 44px;
			padding: 15px 5px;
			box-sizing: border-box;
			image{
				width: 18px;
				height: 18px;
			}
		}
	}
	.brand{
		width: 100%;
		height: 50px;
		padding: 0 15px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		.left{
			line-height: 50px;
			font-size: 16px;
			font-weight: 600;
		}
		.right{
			line-height: 50px;
			font-size: 13px;
		}
	}
	.brand-swiper{
		width: 100%;
		height: 135px;
		display: flex;
		justify-content: space-evenly;
		.per{
			width: 104px;
			height: 134px;
			image{
				width: 104px;
				height: 88px;
			}
			.ch{
				width: 100%;
				height: 18px;
				margin: 10px 0 0;
				text-align: center;
				font-size: 13px;
				line-height: 18px;
			}
			.en{
				width: 100%;
				height: 14px;
				text-align: center;
				font-size: 10px;
				line-height: 14px;
			}
		}
	}
	.speci{
		width: 100%;
		height: 22px;
		font-size: 16px;
		font-weight: 600;
		line-height: 22px;
		padding: 0 20px;
		margin: 20px 0;
	}
	.content{
		// width: 315px;
		height: 157px;
		overflow-x: auto;
		overflow-y: hidden;
		display: flex;
		flex-wrap: nowrap;
		padding-bottom: 50px;
		.speci-swiper{
			width: 315px;
			height: 100%;
			margin-left: 20px;
			.inner-card{
				position: relative;
				display: flex;
				justify-content: space-between;
				width: 295px;
				height: 130px;
				margin: 25px 0 0;
				background-color: #fff;
				border-radius: 10px;
				image{
					position: absolute;
					left: 22px;
					bottom: 15px;
					width: 97px;
					height: 140px;
				}
				.info{
					width: 158px;
					height: 130px;
					margin: 0 0 0 137px;
					padding: 18px;
					box-sizing: border-box;
					.name{
						font-size: 14px;
						font-weight: 600;
					}
					.desc{
						font-size: 12px;
						color: #B0B0B0;
						margin-top: 10px;
					}
				}
			}
		}
	}
	
}
</style>
